<template>
  <div class="wechat">
    <!-- 卡片视图区域 -->
    <div class="wechat_card">
      <!-- 布局 -->
      <el-row :gutter="20" class="wechat_card_head" type="flex">
        <el-col :span="8">
          <!-- 搜索框及添加区域 -->
          <el-input
            placeholder="请输入出入时间"
            v-model="queryInfo.query"
            clearable
            @clear="getComeInRecordList"
            @input="clearData"
            size="medium"
          >
            <el-button
              slot="append"
              size="medium"
              icon="el-icon-search"
              @click="getComeInRecordList"
            ></el-button> </el-input
        ></el-col>

        <el-button
          size="medium"
          type="danger"
          class="btn_head_medium"
          @click="removeUserByIds"
          icon="el-icon-remove-outline"
          >删除</el-button
        >
        <div class="tools_head">
          <el-tooltip content="导出excel" placement="bottom">
            <el-button
              size="small"
              icon="el-icon-download"
              style="margin-left: 10px"
              @click="handleDownload"
            ></el-button>
          </el-tooltip>
        </div>
      </el-row>
      <!-- 出入记录列表区域 -->
      <el-table
        :data="comeInRecordList"
        style="width: 100%"
        height="85%"
        size="small"
        border
        stripe
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
        :row-key="
          (row) => {
            return row.id;
          }
        "
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
        ></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="residentName" label="姓名"> </el-table-column>
        <el-table-column
          prop="state"
          label="出入状态"
          :filters="[
            { text: '出', value: 0 },
            { text: '入', value: 1 },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state === 0" type="success">出</el-tag>
            <el-tag v-else type="danger">入</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="出入时间" width="180px" sortable>
        </el-table-column>
        <el-table-column prop="addName" label="登记人"></el-table-column>
        <el-table-column prop="addTime" label="登记时间" width="180px">
        </el-table-column>
        <el-table-column prop="memo" label="备注"></el-table-column>
        <el-table-column label="操作" width="150px">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeUserById(scope.row.id)"
            ></el-button>
            <el-tooltip
              effort="dark"
              content="查看详情"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="success"
                icon="el-icon-s-order"
                size="mini"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryInfo.pageNum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="this.queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      // 获取出入记录列表的参数对象
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      comeInRecordList: [],
      total: 0,
      // 控制添加对话框的显示与隐藏
      addDialogVisible: false,
      // 控制修改对话框的显示与隐藏
      editDialogVisible: false,
      // 添加房产的表单数据
      addForm: {
        residentId: '',
        state: '',
        time: '',
        communityId: '',
        addUserId: '',
        addTime: '',
        memo: ''
      },
      //选中行的id数组
      multipleSelection: [],
      idsArray: {
        ids: []
      },
    }

  },
  created() {
    this.getComeInRecordList()
  },
  methods: {
    // 获取出入记录档案列表
    async getComeInRecordList() {
      if (this.queryInfo.query !== '')
        //模糊查询街道办名
        this.queryInfo.condition = `time like "%${this.queryInfo.query}%"`
      const { data: res } = await this.$http.get('BasecommunityoutandinrecordAction/getBasicInfos', { params: this.queryInfo })
      if (!res.success) return this.$message.error('获取业主出入列表失败')
      console.log(res)
      this.comeInRecordList = res.rows
      this.total = res.total
    },
    //监听搜索输入框
    clearData() {
      if (this.queryInfo.query == '') {
        delete this.queryInfo.condition
      }
    },
    filterTag(value, row) {
      return row.state === value;
    },
    // 根据id删除出入记录
    async removeUserById(ids) {
      // 先弹框询问用户是否确定要删除
      const confirmResult = await this.$confirm('此操作将永久删除该出入记录记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
        return err
      })
      // 如果点击取消返回的是字符串cancel
      // 如果点击确认返回的是字符串confirm
      if (confirmResult !== 'confirm') {
        return this.$message.info('取消了删除')
      }
      const { data: res } = await this.$http.post("BasecommunityoutandinrecordAction/deleteByIds", { ids })
      console.log(res);
      if (!res.success) {
        return this.$message.error('删除出入记录失败')
      }
      this.$message.success('删除出入记录成功')
      // 刷新列表
      this.getComeInRecordList()
    },
    //批量删除
    async removeUserByIds() {
      const rows = this.$refs.multipleTable.selection;
      if (rows.length === 0) {
        this.$message.warning('请选择需要操作的数据')
        return
      }
      else {
        // 先弹框询问用户是否确定要删除
        const confirmResult = await this.$confirm('此操作将永久删除该出入记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => {
          return err
        })
        if (confirmResult !== 'confirm') {
          return this.$message.info('取消了删除')
        }
        const { data: res } = await this.$http.post("BasecommunityoutandinrecordAction/deleteByIds", this.idsArray)
        console.log(res);
        if (!res.success) {
          return this.$message.error('删除出入记录失败')
        }
        this.$message.success('删除出入记录成功')
        //此时全选框还是选中状态，批量删除后需清除选中状态
        this.$refs.multipleTable.clearSelection();
        // 刷新列表
        this.getStreetList()
      }

    },
    //当多选框选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.idsArray.ids = [] //每次点击需清空原本数组的内容
      this.multipleSelection.map(item => { //遍历数组，把id存进自定义的数组里
        this.idsArray.ids.push(item.id)
      })
      this.idsArray.ids = this.idsArray.ids.join(',')
      // console.log(this.idsArray);

    },
    //导出Excel表
    handleDownload() {
      window.open(axios.defaults.baseURL + '/BasecommunityoutandinrecordAction/exportDataToExcel?token=' + window.sessionStorage.getItem('token'))
    },

    // 监听pageSize改变的事件
    handleSizeChange(newPageSize) {
      // console.log(newPageSize)
      this.queryInfo.pageSize = newPageSize
      // PageSize改变重新拿到出入记录列表
      this.getComeInRecordList()
    },
    // 监听当前页码改变的事件
    handleCurrentChange(newPageNum) {
      // console.log(newPageNum)
      this.queryInfo.pageNum = newPageNum
      this.getComeInRecordList()
    },
  }
}
</script>
<style lang="less" scoped>
</style>